﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:el="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions" 
    xmlns:eim="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"
   xmlns:controls="clr-namespace:MyRun.Controls"
    xmlns:es="clr-namespace:Microsoft.Expression.Shapes;assembly=Microsoft.Expression.Drawing"
    x:Class="MyRun.Controls.SportRunButton"
    mc:Ignorable="d"
    d:DesignHeight="150" d:DesignWidth="480">
    <UserControl.Resources>
    	<Style x:Key="ButtonBegin" TargetType="Button">
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="Button">
    					<Grid>
    						<Ellipse Fill="{StaticResource PhoneForegroundBrush}"/>
                            <Path x:Name="path" Data="M30,30 L30,80 L60,55 z" Fill="{StaticResource PhoneBackgroundBrush}" Margin="30,20,10,20" Stretch="Fill" UseLayoutRounding="False"/>
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>
        <Style x:Key="CheckBoxPause" TargetType="CheckBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <Grid>
                    		<VisualStateManager.VisualStateGroups>
                    			<VisualStateGroup x:Name="CheckStates">
                    				<VisualState x:Name="Indeterminate"/>
                    				<VisualState x:Name="Unchecked">
                    					<Storyboard>
                    						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="rectangle">
                    							<DiscreteObjectKeyFrame KeyTime="0">
                    								<DiscreteObjectKeyFrame.Value>
                    									<Visibility>Collapsed</Visibility>
                    								</DiscreteObjectKeyFrame.Value>
                    							</DiscreteObjectKeyFrame>
                    						</ObjectAnimationUsingKeyFrames>
                    						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="rectangle1">
                    							<DiscreteObjectKeyFrame KeyTime="0">
                    								<DiscreteObjectKeyFrame.Value>
                    									<Visibility>Collapsed</Visibility>
                    								</DiscreteObjectKeyFrame.Value>
                    							</DiscreteObjectKeyFrame>
                    						</ObjectAnimationUsingKeyFrames>
                    					</Storyboard>
                    				</VisualState>
                    				<VisualState x:Name="Checked">
                    					<Storyboard>
                    						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="path">
                    							<DiscreteObjectKeyFrame KeyTime="0">
                    								<DiscreteObjectKeyFrame.Value>
                    									<Visibility>Collapsed</Visibility>
                    								</DiscreteObjectKeyFrame.Value>
                    							</DiscreteObjectKeyFrame>
                    						</ObjectAnimationUsingKeyFrames>
                    					</Storyboard>
                    				</VisualState>
                    			</VisualStateGroup>
                    		</VisualStateManager.VisualStateGroups>
                    		 
                    		<Path Data="M0,0 L100,0 L130,50 L100,100 L0,100 z" HorizontalAlignment="Left" Stretch="Fill" Width="130.667" UseLayoutRounding="False" Fill="{StaticResource PhoneForegroundBrush}" />
                    		<Path x:Name="path" Data="M30,30 L30,80 L80,55 z" Fill="{StaticResource PhoneBackgroundBrush}" Margin="30,20,50,20" Stretch="Fill" UseLayoutRounding="False"/>
                    		<Rectangle x:Name="rectangle1" Fill="{StaticResource PhoneBackgroundBrush}" HorizontalAlignment="Left" Margin="30,20,0,20" Width="14"/>
                    		<Rectangle x:Name="rectangle" Fill="{StaticResource PhoneBackgroundBrush}" Margin="58,20"/>
							
                    	</Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Storyboard x:Name="BeginRunStoryboard">
    		<DoubleAnimation Duration="0:0:0.3" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
    		<DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="button" d:IsOptimized="True"/>
    	</Storyboard>
    </UserControl.Resources>

	<UserControl.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</UserControl.FontFamily>
	<UserControl.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</UserControl.FontSize>
	<UserControl.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</UserControl.Foreground>

	<Grid x:Name="LayoutRoot">
		<Grid.ColumnDefinitions>
			<ColumnDefinition/>
			<ColumnDefinition/>
			<ColumnDefinition/>
		</Grid.ColumnDefinitions>
       
		<Grid x:Name="grid" Grid.ColumnSpan="3" Opacity="0">
            <CheckBox x:Name="chkPause" Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked" IsChecked="True"  Height="100" Style="{StaticResource CheckBoxPause}" Width="130" Margin="10,0,0,0" HorizontalAlignment="Left">
                <CheckBox.RenderTransform>
                    <TranslateTransform X="0"/>
                </CheckBox.RenderTransform>
                <i:Interaction.Behaviors>
                    <controls:DragMoveBehavier x:Name="dragMove" 
                                               TargetComplete="DragMoveBehavier_TargetComplete" CompleteWidth="340"/>
                    <el:FluidMoveBehavior />
				</i:Interaction.Behaviors>
               
            </CheckBox>
            <Path Data="M0,0 L130,0 L130,100 L0,100 L30,50 z" Fill="{StaticResource PhoneForegroundBrush}" HorizontalAlignment="Right" Margin="0,25,10,25" Stretch="Fill" Width="130" UseLayoutRounding="False" d:LayoutOverrides="GridBox" />
		</Grid>
		<Button x:Name="button" Content="跑步" Tap="button_Tap" Grid.Column="1" Height="100" Style="{StaticResource ButtonBegin}" Width="100">
			<i:Interaction.Triggers>
                <i:EventTrigger EventName="Tap">
					<eim:ControlStoryboardAction Storyboard="{StaticResource BeginRunStoryboard}"/>
				</i:EventTrigger>
			</i:Interaction.Triggers>
		</Button>
	</Grid>
</UserControl>
